<template>
	<div class="fragments_header">
		<span class="logo">
			<el-icon class="mx-3">
				<ChromeFilled />
			</el-icon>
			Black前端编程
		</span>
		<el-icon class="icon_btn" @click="$store.commit('handleAsideWidth')">
			<Fold v-if="$store.state.asideWidth == '250px'" />
			<Expand v-else />
		</el-icon>
		<!-- <el-icon class="icon_btn"><Menu /></el-icon> -->
		<el-tooltip class="box-item" effect="light" content="刷新" placement="bottom">
			<el-icon class="icon_btn" @click="handleRefresh">
				<Refresh />
			</el-icon>
		</el-tooltip>
		<div class="header_right">
			<el-tooltip class="box-item" effect="light" content="全屏" placement="bottom">
				<el-icon class="icon_btn" @click="toggle">
					<FullScreen v-if="!isFullscreen" />
					<CopyDocument v-else="isFullscreen" />
				</el-icon>
			</el-tooltip>
			<el-dropdown class="dropdown" @command="handleCommand">
				<span class="drop_admin">
					<el-avatar class="mx-2" :size="25" :src="$store.state.user.avatar" />
					{{ $store.state.user.username }}
					<el-icon class="el-icon--right">
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="repassword">修改密码</el-dropdown-item>
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<span class="mr-5">{{ online ? '在线' : '离线' }}</span>
		</div>
	</div>

	<form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
		<el-form :model="form" ref="formRef" label-width="100px" :rules="rules" class="form_password">
			<el-form-item prop="oldpassword" class="my-4" label="旧密码">
				<el-input class="input_password" v-model="form.oldpassword" placeholder="请输入旧密码" type="passord" show-password />
			</el-form-item>
			<el-form-item prop="password" class="my-4" label="新密码">
				<el-input class="input_password" v-model="form.password" placeholder="请输入新密码" type="password" show-password />
			</el-form-item>
			<el-form-item prop="repassword" class="my-4" label="确认密码">
				<el-input class="input_password" v-model="form.repassword" placeholder="请输入确认密码" type="password" show-password />
			</el-form-item>
		</el-form>
	</form-drawer>
</template>

<script setup>
import { useFullscreen, useOnline } from '@vueuse/core'
import FormDrawer from '~/components/FormDrawer.vue'
import { useRepassword, useLogout } from '~/composables/useManager'

const online = useOnline();

const { isFullscreen, toggle } = useFullscreen()
// 密码重置封装方法的调用
const { formRef, formDrawerRef, form, rules, onSubmit, openRePassWordForm} = useRepassword()

const { handleLogout } = useLogout()

const handleCommand = (flag) => {
	switch (flag) {
		case "logout":
			handleLogout()
			break;
		case "repassword":
			// showDrawer.value = true
			openRePassWordForm()
			break;
	}
}

// 刷新页面
const handleRefresh = () => location.reload()

</script>

<style lang="scss" scoped>
.fragments_header {
	@apply flex items-center bg-violet-400 text-light-50 fixed top-0 left-0 right-0;
	height: 64px;
	z-index: 1000;
	// background-image: linear-gradient(120deg, #76daec 0%, #c5a8de 100%);
}

.header_right {
	@apply flex items-center ml-auto;
}

.logo {
	@apply flex justify-center items-center font-medium;
	width: 250px;
}

.icon_btn {
	@apply flex justify-center items-center;
	width: 42px;
	height: 64px;
}

.icon_btn:hover {
	@apply bg-violet-300;
}

.header_right .dropdown {
	@apply flex justify-center items-center mx-5;
	height: 64px;
	cursor: pointer;
}

.drop_admin {
	@apply flex items-center justify-center text-light-50;
}

.form_password {
	@apply flex justify-center items-center flex-col;
}

.input_password {
	width: 300px;
}
</style>